<template>
  <view class="wrapper">
    <view class="container">
      <VueEcharts :option="options" />
    </view>
  </view>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import VueEcharts from 'vue-echarts';

// 初始进度值
const props = defineProps({
  data: Object,
});
const options = ref(null);
onMounted(() => {
  upData();
});
const upData = () => {
  options.value = {
    color: ['#E8F1FF'],
    title: {
      text: '',
    },
    tooltip: {},
    grid: {
      left: '10%',
      right: '10%',
      bottom: '10%',
      top: '10%',
    },
    xAxis: {
      type: 'value',
    },
    yAxis: { type: 'category', data: ['中专', '3+2', '升学班'] },
    series: [{
      name: '实到人数',
      type: 'bar',
      data: [170, 186, 48],
      barWidth: 40,
      label: {
        show: true,
        position: 'insideRight',
      },
      showBackground: true,
      backgroundStyle: {
        color: '#F5F9FC',
      },
      itemStyle: {
        normal: {
          barBorderRadius: [5, 5, 0, 0],
        },
      },
    }],

  };
};
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		box-sizing: border-box;
		padding: 0 50rpx;
		height: 400rpx;
	}
	.container{
		width: 100%;
		height: 100%;
	}
</style>
